<template>
 <div>
  <div class="app-main-searsh">
    <div class="app-main-searsh__title" v-if="curentList.length">
        <p>最近搜索</p>
        <van-icon @click="handleDelete" name="delete-o" />
    </div>
    <div class="app-main-searsh__list">
      <router-link 
      custom
      v-slot="{navigate}"
      v-for="current in curentList" :key="current"
      :to="{name:'list',query:{searsh:current}}"
      >
      <van-tag @click="navigate" type="primary" size="large" color="#ccc" class="app-main-searsh__list-item">{{current}}</van-tag>
    </router-link>
    </div>
  </div>
  <div class="app-main-searsh">
    <div class="app-main-searsh__title">
        <p>热门搜索</p>
        <span @click="isTrue=!isTrue">{{isTrue?'隐藏':'显示'}}</span>
    </div>
    <div class="app-main-searsh__list" v-if="isTrue">
      <router-link 
      custom
      v-slot="{navigate}"
      :to="{name:'list',query:{searsh:hot.keyword}}" v-for="hot in hotSearshList" :key="hot.wordid" 

      >
      <van-tag @click="navigate" type="primary" size="large" color="#ccc" class="app-main-searsh__list-item">{{hot.keyword}}</van-tag>
    </router-link>
    </div>
    <p v-else>已隐藏热门搜索</p>
  </div>
 </div>
</template>
<script setup lang="ts">
import store from 'store'
import {getHistoryProListApi} from '@/api/pro'
import {ref,onMounted} from 'vue'
import type {IHistoryParams} from '@/@types/pro'
const curentList=ref<string[]>(store.get('history')||[])
const hotSearshList=ref<IHistoryParams[]>([])
const getHistoryProList=async()=>{
  hotSearshList.value=((await getHistoryProListApi())as unknown ) as IHistoryParams[]
}
const handleDelete=()=>{
  curentList.value=[]
  store.remove('history')
}
onMounted(()=>{
  getHistoryProList()
})
const isTrue=ref<boolean>(true)
</script>
<style lang="scss">
  .app-main-searsh{
    &__title{
      padding: 5px;
      display: flex;
      justify-content: space-between;
    }
    &__list{
      &-item{
        margin: 5px;
      }
    }
  }
</style>